refactor(university): refine breadcrumbs & semester overview design w… - #115
Conversation
…ith centered layout
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughUpdates RGPV breadcrumb formatting and styling, rebuilds the semester overview data model and layouts for common and non-common branches, and removes ChangesRGPV UI refresh
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
components/university/semester-overview.tsx (2)
119-124: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winHeading levels skip from
h1directly toh3.The section has a single
h1(line 119) and then jumps toh3for card titles (lines 160, 197), with no interveningh2. This breaks the document heading outline for screen-reader users navigating by heading level.♿ Proposed fix: promote card titles to h2
- <h3 className="mt-6 text-2xl font-bold text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"> + <h2 className="mt-6 text-2xl font-bold text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"> {sem.name} - </h3> + </h2>- <h3 className="text-xl font-bold text-foreground"> + <h2 className="text-xl font-bold text-foreground"> {yearBlock.year} - </h3> + </h2>Also applies to: 160-162, 197-199
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/university/semester-overview.tsx` around lines 119 - 124, Promote the card title headings in the semester overview from h3 to h2 so the document outline progresses from the existing h1 to h2 without skipping levels. Update both card-title elements associated with the headings around the visible h1, preserving their text and styling.
135-138: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCard reveal animation now triggers on mount instead of on scroll into view.
Both card containers switched from
whileInView/viewport={{ once: true }}toinitial/animate, so the ~0.45–0.65s transition completes almost immediately after mount. For non-common branches these cards sit below the hero and are typically off-screen on load, so by the time a user scrolls to them the "reveal" effect has already finished, defeating its purpose.Also applies to: 180-186
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/university/semester-overview.tsx` around lines 135 - 138, Restore scroll-triggered reveal behavior for both card containers in the semester overview, including the block around the motion.div at the referenced second location. Replace mount-only initial/animate transitions with whileInView and a once-only viewport configuration, preserving the existing opacity, vertical offset, duration, and delay values.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/university/semester-overview.tsx`:
- Around line 119-124: Update the gradient utility on the heading in the
semester overview, and all other bg-gradient-to-* usages in the codebase, to
Tailwind v4’s corresponding bg-linear-to-* classes while preserving each
gradient direction and color configuration.
---
Nitpick comments:
In `@components/university/semester-overview.tsx`:
- Around line 119-124: Promote the card title headings in the semester overview
from h3 to h2 so the document outline progresses from the existing h1 to h2
without skipping levels. Update both card-title elements associated with the
headings around the visible h1, preserving their text and styling.
- Around line 135-138: Restore scroll-triggered reveal behavior for both card
containers in the semester overview, including the block around the motion.div
at the referenced second location. Replace mount-only initial/animate
transitions with whileInView and a once-only viewport configuration, preserving
the existing opacity, vertical offset, duration, and delay values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: c1b9c268-961b-472d-98b3-5a8dc825a987
📒 Files selected for processing (3)
app/rgpv/[branch]/page.tsxcomponents/breadcrumbs.tsxcomponents/university/semester-overview.tsx
| <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl text-foreground leading-[1.15]"> | ||
| Semester Wise{" "} | ||
| <span className="bg-gradient-to-r from-blue-600 via-indigo-600 to-cyan-500 bg-clip-text text-transparent dark:from-blue-400 dark:via-indigo-300 dark:to-cyan-400"> | ||
| Learning Path | ||
| </span> | ||
| </h2> | ||
| </h1> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== package manifests / tailwind deps =="
for f in package.json pnpm-lock.yaml yarn.lock package-lock.json bun.lockb; do
if [ -f "$f" ]; then
echo "--- $f ---"
if [ "$f" = "package.json" ]; then
node -e 'const p=require("./package.json"); console.log(JSON.stringify({dependencies:p.dependencies,devDependencies:p.devDependencies},null,2))' | rg -n 'tailwind|vite|next|react' || true
else
rg -n 'tailwindcss|tailwindcss-variants|postcss|cssnano|`@tailwind`|css' "$f" | head -80 || true
fi
fi
done
echo
echo "== config files mentioning Tailwind =="
git ls-files | rg '(^|/)(tailwind\.config\.(js|cjs|mjs|ts)|postcss\.config\.(js|cjs|mjs)|app\.css|globals\.css|.global\.css|components\.css)$' || true
echo
echo "== target file excerpt =="
if [ -f components/university/semester-overview.tsx ]; then
wc -l components/university/semester-overview.tsx
sed -n '100,135p' components/university/semester-overview.tsx
fi
echo
echo "== occurrences of gradient classes =="
rg -n 'bg-gradient-to-|bg-linear-to-|from-[^ ]+ via-[^ ]+ to-[^ ]+' components app src . --glob '!node_modules' --glob '!dist' --glob '!build' || trueRepository: imuniqueshiv/HyperLearningTech
Length of output: 50386
🌐 Web query:
Tailwind CSS v4 bg-linear-to-r bg-gradient-to-r renamed background gradients utilities documentation
💡 Result:
In Tailwind CSS v4, the background gradient utility classes were renamed to align with native CSS gradient functions [1][2]. The v3 class bg-gradient-to-r has been replaced by bg-linear-to-r [1][3][4]. Key details regarding this change: - Renaming Logic: The bg-gradient-* prefix was changed to bg-linear-* to better match the underlying native CSS linear-gradient() function [1][2]. This also creates a consistent naming convention alongside the new bg-radial-* and bg-conic-* utilities introduced in v4 [1][4][2]. - Compatibility: The legacy bg-gradient-to-* classes are no longer supported in v4 [1][4]. - Functionality: While the class names changed, the associated color stop utilities (from-*, via-*, to-*) continue to work identically to how they functioned in v3 [1][4]. - New Features: Tailwind v4 expands gradient capabilities by allowing linear gradients to accept angles (e.g., bg-linear-45) and supporting interpolation mode modifiers (e.g., /srgb, /oklch) to control color blending [2]. To migrate from v3 to v4, you should replace all instances of bg-gradient-to- with bg-linear-to- [3][4]. Automated upgrade tools generally handle this, though developers should manually check for dynamically built class strings that may not be caught by static analysis [1].
Citations:
- 1: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
- 2: https://tailwindcss.com/blog/tailwindcss-v4
- 3: https://opentailwind.dev/blog/tailwind-css-v4-migration-guide/
- 4: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
🌐 Web query:
Tailwind CSS v4 bg-linear-to-r text-transparent bg-clip-text gradient text example
💡 Result:
In Tailwind CSS v4, the utility class naming for linear gradients was updated from the v3 bg-gradient-to-* syntax to bg-linear-to-* to better align with the native CSS linear-gradient() function [1][2]. To create gradient text in Tailwind CSS v4, you combine the linear gradient utility, color stop utilities, bg-clip-text to crop the background to the text's shape, and text-transparent to make the text color transparent so the background gradient shows through [3][4][5]. Here is a complete example of gradient text using Tailwind v4 syntax:
Gradient Text
Key Components: - bg-linear-to-r: Defines the linear gradient direction (left to right) [6][1]. - from-{color} and to-{color}: Define the starting and ending colors of the gradient [6][1]. - bg-clip-text: Clips the background image to the shape of the text [3][5]. - text-transparent: Sets the text color to transparent, revealing the background gradient underneath [7][5]. For more complex gradients, you can use intermediate color stops (e.g., via-purple-500) or specify precise percentage positions (e.g., from-10%, via-30%, to-90%) [6][1]. Tailwind v4 defaults to using OKLCH color interpolation for smoother, more vibrant gradients [1][8].Citations:
- 1: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
- 2: https://opentailwind.dev/blog/tailwind-css-v4-migration-guide/
- 3: https://tailwindcss.com/docs/background-clip
- 4: https://stackoverflow.com/questions/71205457/how-to-add-a-linear-gradient-to-text-in-tailwind-css
- 5: https://dusktools.app/tailwind/bg-clip-text
- 6: https://tailwindcss.com/docs/background-image
- 7: https://benborgers.com/tailwind-gradient-text
- 8: https://stevekinney.com/courses/tailwind/gradients
Update Tailwind v4 gradient classes to bg-linear-to-*.
This project is using Tailwind/PostCSS 4.3.1, where the linear gradient utility is bg-linear-to-r; bg-gradient-to-r is v3 syntax and will not generate the intended background image. The same migration applies here and to the other bg-gradient-to-* classes in the codebase.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/university/semester-overview.tsx` around lines 119 - 124, Update
the gradient utility on the heading in the semester overview, and all other
bg-gradient-to-* usages in the codebase, to Tailwind v4’s corresponding
bg-linear-to-* classes while preserving each gradient direction and color
configuration.
1 participant
…ith centered layout
Summary by CodeRabbit
New Features
Style